let watermark = {};
let id = "";

let setWatermark = (str) => {
  let curId = "bailing_watermark";

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id));
  }

  //创建一个画布
  let can = document.createElement("canvas");
  //设置画布的长宽
  const length = str.length;
  can.width = length * 32;
  can.height = length * 32;

  let cans = can.getContext("2d");
  //旋转角度
  cans.rotate((-15 * Math.PI) / 80);
  cans.font = "lighter 12px Vedana";
  //设置填充绘画的颜色、渐变或者模式
  cans.fillStyle = "rgba(200, 200, 200, 0.50)";
  //设置文本内容的当前对齐方式
  cans.textAlign = "left";
  //设置在绘制文本时使用的当前文本基线
  cans.textBaseline = "Middle";
  //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
  cans.fillText(str, 0, can.height / 2);

  let div = document.createElement("div");
  document.getElementById("printContent").appendChild(div)
  div.id = curId;
  div.style.pointerEvents = "none";
  div.style.top = "0px";
  div.style.left = "0px";
  div.style.position = "fixed";
  div.style.zIndex = "998";
  div.style.width = document.documentElement.clientWidth + "px";
  div.style.height = document.documentElement.clientHeight + "px";
  div.style.overflow = 'hidden';
  // div.style.fontWeight = "lighter";
  // div.style.background =
  //   "url(" + can.toDataURL("image/png") + ") left top repeat";
  // document.body.appendChild(div);

  let wrapNum = 5, // 5个换行。
    top = -30, // 距离顶部距离。
    text = str; // 水印文案。

  // 修改left、top距离，实现满屏水印效果。
  let wrapFn = (i, type) => {
    let multiple = Math.floor(i / wrapNum);
    if (type == 'left') {
      let temp = i * 200 + 'px';
      temp = (i - multiple * wrapNum) * 150 + 'px';
      return temp;
    }
    if (type == 'top') {
      let temp = top + 'px';
      temp = (top + (180) * multiple) + 'px';
      return temp;
    }
  }

  for (var i = 0; i < 100; i++) {
    let span = document.createElement('span');
    span.style.position = 'fixed';
    span.style.zIndex = '999999';
    span.style.whiteSpace = 'nowrap'; // 禁止文字换行
    span.style.padding = '120px';
    span.style.transform = `rotate(${'-30'}deg)`; // 旋转-30deg。
    span.style.fontSize = '12px';
    span.style.pointerEvents = 'none'; // css事件穿透
    span.style.color =  '#ccc';
    span.style.left = wrapFn(i, 'left');
    span.style.top = wrapFn(i, 'top');
    span.style.opacity =  0.5;
    span.innerText = text;
    if ( Math.floor(i / wrapNum) *180 <document.documentElement.clientHeight){
      div.appendChild(span);
    }else {
      return
    }
  }
  return curId;
};

let _interval = null;

// 该方法只允许调用一次
watermark.set = (str) => {
  if (_interval) {
    watermark.remove();
  }
  id = setWatermark(str);
  _interval = setInterval(() => {
    if (id && document.getElementById(id) === null) {
      id = setWatermark(str);
    }
  }, 500);
  // window.onresize = () => {
  //   setWatermark(str);
  // };
};

// 移除
watermark.remove = () => {
  var box = document.getElementById(id);
  if (box) {
    box.parentNode.removeChild(box);
    clearInterval(_interval);
    _interval = null;
  }
};

export default watermark;
